<template>
<!--  <v-row>-->
<!--    <v-col cols="12" style="background-color: #333;height: 330px; padding: 0;margin: 0">-->
      <v-card class="mb-4" color="#424242">
        <v-card-text>
          <div ref="lineChart" style="width: 100%; height: 250px; padding: 0;margin: 0"></div>
        </v-card-text>
      </v-card>
<!--    </v-col>-->
<!--  </v-row>-->
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'VocabularyLineChart',
  data() {
    return {
      lineChart: null,
      chartData: [
        { "词汇等级": "初学者", "freq_10": 332, "freq_20": 188 },
        { "词汇等级": "初级", "freq_10": 439, "freq_20": 326 },
        { "词汇等级": "中级", "freq_10": 237, "freq_20": 113 },
        { "词汇等级": "中高级", "freq_10": 243, "freq_20": 73 },
        { "词汇等级": "高级", "freq_10": 26, "freq_20": 7 },
        { "词汇等级": "熟练", "freq_10": 0, "freq_20": 0 }
      ]
    };
  },
  mounted() {
    this.initLineChart();
  },
  beforeDestroy() {
    if (this.lineChart) {
      this.lineChart.dispose();
    }
  },
  methods: {
    initLineChart() {
      this.lineChart = echarts.init(this.$refs.lineChart);

      const levels = this.chartData.map(item => item.词汇等级);
      const freq10Data = this.chartData.map(item => item.freq_10);
      const freq20Data = this.chartData.map(item => item.freq_20);

      const option = {
        // title: {
        //   text: '词汇等级频率变化',
        //   left: 'center',
        //   textStyle: {
        //     color: 'white',
        //     fontSize: 18
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            let result = params[0].axisValue + '<br/>';
            params.forEach(param => {
              result += `${param.seriesName}: ${param.value}<br/>`;
            });
            return result;
          },
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: '#333',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        legend: {
          data: ['词频 ≥ 10', '词频 ≥ 20'],
          right: 20,
          top: 20,
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: levels,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            color: 'white',
            fontSize: 12,
            interval: 0
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          name: '数量',
          nameTextStyle: {
            color: 'white',
            padding: [0, 0, 0, 40]
          },
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            color: 'white'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          }
        },
        series: [
          {
            name: '词频 ≥ 10',
            type: 'line',
            data: freq10Data,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: '#5470C6'
            },
            itemStyle: {
              color: '#5470C6',
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                color: '#FFEB3B'
              }
            },
            smooth: true,
            animationEasing: 'cubicOut'
          },
          {
            name: '词频 ≥ 20',
            type: 'line',
            data: freq20Data,
            symbol: 'diamond',
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: '#91CC75'
            },
            itemStyle: {
              color: '#91CC75',
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                color: '#FFEB3B'
              }
            },
            smooth: true,
            animationEasing: 'cubicOut'
          }
        ]
      };
      this.lineChart.setOption(option);

      // 响应式调整
      window.addEventListener('resize', this.handleResize);
    },
    handleResize() {
      if (this.lineChart) {
        this.lineChart.resize();
      }
    }
  }
};
</script>

<style>
.v-card {
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}
</style>